<template>
  <div>
    <t-dialog
      :title="title"
      :show-close="false"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="475px"
      height="660px"
      :before-close="handleClose">
        <div class="dialogContent" style="padding:0;margin-top:-20px;margin-bottom: -20px;">
          <el-row>
              <div class="config-title"></div>  
                <div class="grid-content bg-purple">
                  <el-row style="margin-bottom: 10px">
                    <el-col :span="19">
                      <div style="position: relative">
                        <el-input size="small" v-model="condition" :placeholder="Terms.portalList.placehold"
                          @keydown.enter.native="search"></el-input>
                        <span style="position: absolute; top: 7px; right: 10px" @click="clearSearch"><i
                            class="el-icon-close"></i></span>
                      </div>
                    </el-col>
                    <el-col :span="5" style="text-align:right;">
                      <el-button size="small" type="primary" icon="el-icon-search" @click="search">{{Terms.portalList.portalListSearch}}</el-button>
                    </el-col>
                  </el-row>
                  <el-row>
                    
                    <div class="categorizesDiv">
                      <div v-for="item in categorizesShow" :key="item.Name" :class="item.IsActive?'showBlock active':'showBlock'" @click="selectCategorize(item,$event)">
                        {{ item.Name }}<div class="num">{{ item.PortletCount }}</div>
                      </div>
                      <el-dropdown @command="handleCommand" class="hideBlock" trigger="click" v-if="categorizesHide.length>0">
                        <span class="el-dropdown-link">
                          <!-- ...<i class="el-icon-arrow-down el-icon--right"></i> -->
                          <i class="el-icon-more"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item :command="item2.Name" v-for="item2 in categorizesHide" :key="item2.Name" :class="item2.IsActive?'active':''" >
                            {{item2.Name}}<div class="num">{{ item2.PortletCount }}</div>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>

                  </el-row>
                  <el-row>
                    <div width="100%" height="400px" v-loading="loading"> 
                      <el-col >
                        <template v-for="item in tableData">
                          <el-card shadow="hover" :class="item.isActive?'active kakaka':'kakaka'" :body-style="{ padding: '10px'}" @click.native="elCardClick(item,$event)">
                            <div style="display:flex;" >
                              <div style="width: 136px;height: 86px;border-radius: 0px;">
                                <img :src="getPortletThumbnail(item)" width="136" alt="">
                              </div>
                              <div style="padding:10px;">
                                <div class="label" style="display: flex;justify-content: space-between;">
                                  <span style="font-weight: bold;">{{ item.Name }}</span>
                                  <span>
                                    <el-popover
                                      placement="right"
                                      :title="Terms.portalList.preview"
                                      width="400"
                                      trigger="click"
                                      @after-enter="popoverAfterEnter(item,$even)"
                                      >
                                      <div width="100%" height="100%"> 
                                        <iframe :ref="'portletPreviewFrame'+ item.Code" frameborder="0" scrolling="no" allowfullscreen="true" style="min-height:400px;background-color: #f0f2f5;margin: 0;width:100%;"></iframe>
                                      </div>
                                      <a @click="handleCurrentChange(item,$event)" slot="reference" style="cursor: pointer;pointer-events: auto; color: var(--t-color);font-size: 14px;">{{Terms.portalList.preview}}</a>
                                    </el-popover>
                                    <!-- <a @click="handleOpenSelector" href="javascript:void(0)" style="color: var(--t-color);font-size: 14px;">预览</a> -->
                                  </span>
                                </div>
                                <div class="tips" :title="item.Description">{{ item.Description }}</div>
                              </div>
                            </div>
                          </el-card>
                        </template>
                        <el-empty v-if="tableData.length==0" :description="Terms.portalList.noData"></el-empty>
                      </el-col>
                    </div>
                    <div style="text-align:center;margin-top: 10px;">
                      <el-pagination :hide-on-single-page="true" layout="prev, pager, next"  :page-size="10" :total="portletTotlal" @current-change="handleCurrentChange"></el-pagination>
                    </div>
                    
                  </el-row>
                </div>
          </el-row>
        </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="mini">{{Terms.portal.cancel}}</el-button>
      <el-button type="primary" @click="sureData" size="mini">{{Terms.portal.confirm}}</el-button>
    </span>
  </t-dialog>
  </div>
</template>

<script>
// import { DxPopup, DxToolbarItem } from "devextreme-vue/popup";
// import { div } from "devextreme-vue/scroll-view";
// import DxButton from "devextreme-vue/button";
import _ from 'lodash'
import { Terms } from "./lib/Term";
import TDialog from 't/basic/dialog'
export default {
  data() {
    return {
      Terms:Terms,
      categorizesShow:[],
      categorizesHide:[],
      currentPageIndex:1,
      portletTotlal:0,
      PreviewVisible:false,
      dialogVisible: false,
      title: Terms.portalList.title,
      loading: false,
      condition: "",
      selectedRow: null,
      returnType: "",
      projectID: "",
      tableData: [],
      expandIds: [],
      buttonAttributes: {
        class: "customColor",
      },
     
    };
  },
  props: {
    args: {
      type: Object,
    },
  },
  components: {
    TDialog

  },
  methods: {
    getPortletThumbnail(item){
      return item.Thumbnail?(window.TeldWebConfig.ResourceURL  +'/'+ item.Thumbnail):'https://resource.teld.cn/fas/defaultPortletImg.png'
    },
    handleCommand(val){
      debugger
      let opt = this.categorizesHide.filter(item=>item.Name == val)[0]
      opt.IsActive = !opt.IsActive
      this.categorizesShow.forEach(item=>{
          if(item.Code == "-1")item.IsActive = false
        })
      this.currentPageIndex=1
      this.$forceUpdate()
      this.getMetaData();
    },
    selectCategorize(item,$event){
      debugger
      if(item.Code == "-1"){
        this.categorizesShow.forEach(item=>item.IsActive = false)
        this.categorizesHide.forEach(item=>item.IsActive = false)
      }else{
        this.categorizesShow.forEach(item=>{
          if(item.Code == "-1")item.IsActive = false
        })
      }
      this.currentPageIndex=1
      item.IsActive = !item.IsActive
      this.$forceUpdate()
      
      this.getMetaData();
    },
    handleSelect(item) {
      this.$emit("sureData", {
        data: item
      });

      this.dialogVisible = false;
    },
    open: function (cus) {

      this.selectedRow = null;
      this.cus = cus;

      this.dialogVisible = true;
      this.condition = "";

      this.getCategorizes().then(()=>{
        this.getMetaData();
      })
    },

    sureData: async function () {
      debugger
        if (!this.selectedRow) {          
            Funcs.Notify(Terms.message.warn, Terms.message.portalWarnMessage, 'warning')
            return;
        }
        this.$emit("sureData", {
            data: this.selectedRow
        });

        this.dialogVisible = false;
    },
    elCardClick(item,$event){
      debugger
      this.selectedRow = item;
      this.tableData.forEach(row=>{
        row.isActive = false
        if(row.ID == item.ID){
          row.isActive = true
        }
      })
      this.$forceUpdate()
    },
    popoverAfterEnter(val,evt){
      
      this.renderPreview()
    },
    handleCurrentChange: function (val,evt) {
      this.selectedRow = val;
      
    },
    getCategorizesFromDb(){
      let sgUrl = Funcs.FasRequestTagAdd(window.FrameSGHost + 'FASR-ActionExecute' + '&actionId=5c4bf8ad-fdb7-4451-aa55-fbc2824425c5')
      let postData = {
        parameters: JSON.stringify([
          { "Order": 0, "ParameterName": "subSystemCode", "ParameterValue": window.getFasDevAppId() }
        ])
      }
      return new Promise((resolve, reject) => {
       window.getDataAsync(sgUrl, 'POST', postData, function(result) {
          if (result.state == 1) {
            let _sta = result.data.List.filter(item=>item.PortletCount != 0)
            resolve(_sta)
          }else{
            reject(result)
          }
        },function(err){
          reject(err)
        })
      })
    },
    async getCategorizes(){
      let _dataList = await this.getCategorizesFromDb()
      debugger
      let total = _.sumBy(_dataList, function(o) { return o.PortletCount; });
      _dataList.forEach(item=>{
        if(item.Code == "-1"){
          item.Name = Terms.portalList.all
          item.IsActive = true
        } else
        item.IsActive = false
      })
      //_dataList.unshift(allCategorize)
      this.categorizesShow = _dataList.slice(0,4)
      this.categorizesHide = _dataList.length >4?_dataList.slice(4):[]

      return Promise.resolve()
    },
    handleCurrentChange(val) {
        this.currentPageIndex = val
        this.getMetaData()
        //console.log(`当前页: ${val}`);
      },
    getMetaData: function () {
      this.loading = true;
      let that = this;
      let _Categories = []
      debugger
      if(this.categorizesShow.length > 0 && this.categorizesShow[0].IsActive == false){
        this.categorizesShow.forEach((item,index)=>{
          if(index != 0 && item.IsActive==true){
            _Categories.push(item.ID)
          }
        })
        this.categorizesHide.forEach((item)=>{
          if(item.IsActive==true){
            _Categories.push(item.ID)
          }
        })
      }
      let sgUrl = window.FrameSGHost + 'FASR-GetPortletMetadatas&fasdevappid=fascommon'
      let postData = {
        SubSystemCode: window.getFasDevAppId(),
        ModuleCode: '',
        FilterKey: this.condition,
        PageIndex:this.currentPageIndex,
        PageSize:10,
        IsContainCategory:true,//包含分类信息
        Categories:_Categories,
        IsCategoryFilterContainsChilds: true  //分类过滤是否包含子级，例如过滤001分类时，同时将类型为子级001001分类的部件查出来
      }

      window.getDataAsync(sgUrl, "post", { filter: JSON.stringify(postData) }, function (result) {
debugger
        that.loading = false;
        if (result) {
          console.log(result);
          let tableData = result.data.rows;
          that.tableData = tableData.slice(0);
          that.tableData.forEach(row=>{
            row.isActive = false
          })
          that.portletTotlal = result.data.total
        }
      })

      //this.loading = false;
    },
    search: function () {
      this.getMetaData();
    },
    clearSearch: function () {
      this.condition = "";
      this.getMetaData();
    },
    renderPreview(){
      if(!this.selectedRow)return
      let id = this.selectedRow.MetaDataID;
      let root = location.href.split('?')[0]
      let url = `${root}?id=${id}`
      this.$refs['portletPreviewFrame'+this.selectedRow.Code][0].src = url
    }
  },


};
</script>
<style>
/* .PortletDxPopup {
  z-index: 2010!important;
} */
.kakaka{
  cursor: pointer;
  pointer-events: auto;
  margin-top: 4px;
  background: #F0F2F5;
  /* box-shadow: 0 2px 2px 2px rgb(0 0 0 / 10%); */
  box-shadow:none!important;
}

.kakaka:hover {
  /* background: #F0F2F5; */
  background: #E5F1FB;
}

.kakaka.active {
  /* background: #F0F2F5; */
  background: #E5F1FB;
}

</style>
<style lang="scss" scoped>
.categorizesDiv {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
}
.categorizesDiv .showBlock{
  height: 32px;
  display: flex;
  align-items: center;
  padding: 8px;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 2px;
}

.categorizesDiv .hideBlock {
  height: 32px;
  display: flex;
  align-items: center;
  background: #D9D9D9;
  width: 32px;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  border-radius: 2px;
}


.categorizesDiv .num {
  height: 20px;
  width: 20px;
  border-radius: 45px;
  background: #D9D9D9;
  text-align: center;
  vertical-align: middle;
  margin-left: 5px;
  padding: 1px;
  font-size: 14px;
  display: inline-block;
  line-height: 18px;
}

.el-dropdown-menu__item .num {
  height: 20px;
  width: 20px;
  border-radius: 45px;
  background: #D9D9D9;
  vertical-align: middle;
  margin-left: 5px;
  padding: 1px;
  font-size: 14px;
  display: inline-block;
  line-height: 18px;
  text-align: center;
}

.categorizesDiv .showBlock:hover{
  background: #F0F2F5;
}
.categorizesDiv .showBlock.active{
  // background-color: var(--t-color-background);
  background: #F0F2F5;
}
.categorizesDiv .showBlock.active .num{
  // background: white;
  // color: var(--t-color-background);
}
.el-dropdown-menu__item.active{
  background-color: var(--t-color-background);
  color: var(--t-color);
}

.current-selected {
  padding: 16px 10px;
  width: 200px;
  height: 120px;
  margin-right: 10px;
  box-shadow: 0 0 10px #525252;
  background-size: 240px 180px;

}

.label {
        width: 260px;
        height: 26px;
        line-height: 26px;
        border-radius: 0px;
        font-size: 18px;
        font-weight: normal;
        text-align: left;
        color: rgba(0,0,0, var(--t-color-opacity, /*批量处理90%透明度*/0.90));
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        
    }

    .tips {
        margin-top:10px;
        width: 260px;
        height: 20px;
        line-height: 20px;
        border-radius: 0px;
        font-size: 14px;
        font-weight: normal;
        text-align: left;
        color: rgba(0,0,0, var(--t-color-opacity, /*批量处理90%透明度*/0.90));
        text-overflow: ellipsis;
        overflow: visible;
    }

.material-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  font-size: 16px;

  .material-fake {
    width: 10em;
    height: 0;
    margin: 0 .2em;
  }

  .material {
    width: 10em;
    height: 12em;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    // border-radius: 8px;
    margin: .8em .2em;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    transition: transform .4s ease-in-out;

    &:hover {
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);

      .img-wrapper {
        img {
          transform: scale(1.05);
        }
      }
    }

    .img-wrapper {
      background: linear-gradient(45deg, rgb(211, 208, 253), rgb(208, 227, 253));
      position: relative;
      width: 10em;
      height: 8em;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .4s ease-in-out;
      }
    }

    .content {
      padding: .4em .4em .8em;

      .label {
        font-size: 1.1em;
        font-weight: bold;
        line-height: 1.8em;
        color: #262626;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }

      .tips {
        font-size: 0.8em;
        color: #686872;
        height: 1.2em;
        line-height: 1.2em;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
}

@media screen and (max-width: 480px) {
  .material-wrapper {
    font-size: 14px;
  }
}
</style>
